<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="主体名称" prop="companyName">
        <el-input
          v-model="queryParams.companyName"
          placeholder="请输入主体名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="主体类型" prop="enterpriseType">
        <el-select
          v-model="queryParams.enterpriseType"
          placeholder="请选择主体类型"
          clearable
        >
          <el-option
            v-for="dict in subject_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="注册地址" prop="town">
        <el-select
          v-model="queryParams.town"
          placeholder="请输入注册地址"
          clearable
        >
          <el-option
            v-for="dict in town"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="法定代表人" prop="legalPerson">
        <el-input
          v-model="queryParams.legalPerson"
          placeholder="请输入法定代表人"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="联系电话" prop="contactNumber">
        <el-input
          v-model="queryParams.contactNumber"
          placeholder="请输入联系电话"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="成立时间" style="width: 308px">
        <el-date-picker
          v-model="daterangeEstablishDate"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['basic:info:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['basic:info:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['basic:info:remove']"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['basic:info:export']"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="infoList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column label="企业编码" align="center" prop="companyCode" /> -->
      <el-table-column label="主体名称" align="center" prop="companyName" />
      <el-table-column label="主体类型" align="center" prop="enterpriseType">
        <template #default="scope">
          <dict-tag :options="subject_type" :value="scope.row.enterpriseType" />
        </template>
      </el-table-column>
      <el-table-column label="注册地址" align="center" prop="town">
        <template #default="scope">
          <dict-tag :options="town" :value="scope.row.town" />
        </template>
      </el-table-column>
      <el-table-column label="法定代表人" align="center" prop="legalPerson" />
      <el-table-column label="联系电话" align="center" prop="contactNumber" />
      <el-table-column
        label="成立时间"
        align="center"
        prop="establishDate"
        width="180"
      >
        <template #default="scope">
          <span>{{ parseTime(scope.row.establishDate, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="行业分类" align="center" prop="industryCategory">
        <template #default="scope">
          <dict-tag
            :options="subject_type"
            :value="scope.row.industryCategory"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="详细地址"
        align="center"
        prop="registeredAddress"
      />
      <el-table-column
        label="是否使用危化品"
        align="center"
        prop="isUseHazardous"
      >
        <template #default="scope">
          <dict-tag :options="sys_yes_no" :value="scope.row.isUseHazardous" />
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="企业生产能力"
        align="center"
        prop="productionCapacity"
      /> -->
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            link
            type="primary"
            icon="Edit"
            @click="handleInfo(scope.row)"
            v-hasPermi="['basic:info:info']"
            >详情</el-button
          >
          <el-button
            link
            type="primary"
            icon="Edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['basic:info:edit']"
            >修改</el-button
          >
          <el-button
            link
            type="primary"
            icon="Delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['basic:info:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改基本信息对话框 -->
    <el-dialog :title="title" v-model="open" width="1400px" append-to-body>
      <el-form ref="infoRef" :model="form" :rules="rules" label-width="80px">
        <div class="custom-form">
          <el-row style="font-size: 18px; margin-left: -3rem"
            >企业基本信息</el-row
          >
          <el-divider class="custom-divider"></el-divider>
          
          <el-row :gutter="20">
            <!-- <el-col :span="12" style="text-align: left">
              <el-form-item
                label="企业编码"
                prop="companyCode"
                label-width="120px"
              >
                <el-input
                  v-model="form.companyCode"
                  placeholder="请输入企业编码"
                />
              </el-form-item>
            </el-col> -->
            <el-col :span="24">
              <el-form-item
                label="企业名称"
                prop="companyName"
                label-width="150px"
              >
                <el-input
                  v-model="form.companyName"
                  placeholder="请输入企业名称"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item
                label="注册地址"
                prop="registeredAddress"
                label-width="150px"
                              >
                <el-input
                  v-model="form.registeredAddress"
                  placeholder="请输入注册地址"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="法定代表人"
                prop="legalPerson"
                label-width="150px"
              >
                <el-input
                  v-model="form.legalPerson"
                  placeholder="请输入法定代表人"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="联系电话"
                prop="contactNumber"
                label-width="150px"
              >
                <el-input
                  v-model="form.contactNumber"
                  placeholder="请输入联系电话"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="证件类型" prop="idType" label-width="150px">
                <el-select v-model="form.idType" placeholder="请选择证件类型">
                  <el-option
                    v-for="dict in id_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="法人证件号"
                prop="idNumber"
                label-width="150px"
              >
                <el-input
                  v-model="form.idNumber"
                  placeholder="请输入法定代表人证件号"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12" style="text-align: left">
              <el-form-item
                label="单位传真"
                prop="faxNumber"
                label-width="150px"
                class="label-width"
              >
                <el-input
                  v-model="form.faxNumber"
                  placeholder="请输入单位传真"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="邮政编码"
                prop="postalCode"
                label-width="150px" 
                class="label-width"
              >
                <el-input
                  v-model="form.postalCode"
                  placeholder="请输入邮政编码"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="成立时间"
                prop="establishDate"
                label-width="150px"
              >
                <el-date-picker
                  clearable
                  v-model="form.establishDate"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="请选择成立时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item
                label="从业人员数量"
                prop="employeesCount"
                label-width="150px"
              >
                <el-input-number
                  v-model="form.employeesCount"
                  placeholder="请输入从业人员数量"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            
            <el-col :span="12">
              <el-form-item
                label="注册资金(万元)"
                prop="registeredCapital"
                label-width="150px"
              >
                <el-input-number
                  v-model="form.registeredCapital"
                  placeholder="请输入注册资金"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="经济类型"
                prop="economicType"
                label-width="150px"
              >
                <el-select
                  v-model="form.economicType"
                  placeholder="请选择经济类型"
                >
                  <el-option
                    v-for="dict in economic_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="代码证类型"
                prop="codeType"
                label-width="150px"
              >
                <el-select
                  v-model="form.codeType"
                  placeholder="请选择代码证类型"
                >
                  <el-option
                    v-for="dict in code_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="营业执照类型"
                prop="businessLicenseType"
                label-width="150px"
              >
                <el-select
                  v-model="form.businessLicenseType"
                  placeholder="请选择营业执照类型"
                >
                  <el-option
                    v-for="dict in business_license_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="企业经营状态"
                prop="businessStatus"
                label-width="150px"
              >
                <el-select
                  v-model="form.businessStatus"
                  placeholder="请选择企业经营状态"
                >
                  <el-option
                    v-for="dict in business_status"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="规模情况"
                prop="businessStatus"
                label-width="150px"
              >
                <el-select
                  v-model="form.scale"
                  placeholder="请输入规模情况"
                >
                  <el-option
                    v-for="dict in enterprise_scale"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="上级公司名称"
                prop="topCompanyName"
                label-width="150px"
                class="label-width"
              >
                <el-input
                  v-model="form.topCompanyName"
                  placeholder="请输入上级公司名称"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item
                label="统一社会使用代码"
                prop="socialCreditCode"
                label-width="150px"
                class="label-width"
              >
                <el-input
                  v-model="form.socialCreditCode"
                  placeholder="请输入统一社会使用代码"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="集团公司名称"
                prop="groupCompanyName"
                label-width="150px"
                class="label-width"
              >
                <el-input
                  v-model="form.groupCompanyName"
                  placeholder="请输入集团公司名称"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item
            label="企业概况"
            prop="companyOverview"
            label-width="150px"
            class="label-width"
          >
            <el-input
              v-model="form.companyOverview"
              type="textarea"
              placeholder="请输入内容"
            />
          </el-form-item>
          <el-form-item
            label="经营范围"
            prop="businessScope"
            label-width="150px"
            class="label-width"
          >
            <el-input
              v-model="form.businessScope"
              type="textarea"
              placeholder="请输入内容"
            />
          </el-form-item>
          <el-form-item label="附件" prop="attachment" class="label-width" >
            <file-upload v-model="form.attachment"/>
          </el-form-item>
        </div>

        <div class="custom-form">
          <el-row style="font-size: 18px; margin-left: -3rem">安全生产基本信息</el-row>
          <el-divider class="custom-divider"></el-divider>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="安全经营地址"
                prop="town"
                label-width="150px"
              >
                <el-select v-model="form.town" placeholder="请选择安全经营地址" >
                  <el-option
                    v-for="dict in town"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12"> 
              <el-form-item
                  label="安全经营详细地址"
                  prop="safetyAddressDetailed"
                  label-width="150px"
                >
                  <el-input
                    v-model="form.safetyAddressDetailed"
                    placeholder="请输入安全经营详细地址"
                  />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">

            <el-col :span="12">
              <el-form-item
                label="行业分类"
                prop="industryCategory"
                label-width="150px"
              >
                <el-input
                  v-model="form.industryCategory"
                  placeholder="请选择行业分类"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="经营类型"
                prop="enterpriseType"
                label-width="150px"
                
              >
                <el-select
                  v-model="form.enterpriseType"
                  placeholder="请选择经营类型"
                >
                  <el-option
                    v-for="dict in subject_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="是否使用危化品"
                prop="isUseHazardous"
                label-width="150px"
                class="label-width"
              >
                <el-radio-group v-model="form.isUseHazardous">
                  <el-radio
                    v-for="dict in sys_yes_no"
                    :key="dict.value"
                    :label="dict.value"
                    >{{ dict.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="是否使用重大危险源"
                prop="isUseMajor"
                label-width="150px"
                class="label-width"
              >
                <el-radio-group v-model="form.isUseMajor">
                  <el-radio
                    v-for="dict in sys_yes_no"
                    :key="dict.value"
                    :label="dict.value"
                    >{{ dict.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item
                label="涉及危化工艺"
                prop="hazardousInvolved"
                label-width="150px"
                class="label-width"
              >
                <el-select
                  v-model="form.hazardousInvolved"
                  placeholder="请选择涉及危化工艺"
                >
                  <el-option
                    v-for="dict in hazardous_involved"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-col :span="24">
              <el-form-item
                label="企业生产能力"
                prop="productionCapacity"
                label-width="150px"
                class="label-width"
              >
                <el-input
                  v-model="form.productionCapacity"
                  type="textarea"
                  placeholder="请输入内容"
                />
              </el-form-item>
          </el-col>

          <el-col :span="24">
              <el-form-item
                label="安全监管监察机构"
                prop="safetyAuthority"
                label-width="150px"
                class="label-width"
              >
                <el-input
                  v-model="form.safetyAuthority"
                  type="textarea"
                  placeholder="请输入安全监管监察机构"
                />
              </el-form-item>
          </el-col>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="企业主要负责人"
                prop="leaderName"
                label-width="150px"
                class="label-width"
              >
                <el-input
                  v-model="form.leaderName"
                  placeholder="请输入企业主要负责人"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="主要负责人手机"
                prop="leaderPhone"
                label-width="150px"
                class="label-width"
              >
                <el-input
                  v-model="form.leaderPhone"
                  placeholder="请输入主要负责人手机"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="证件类型" prop="leaderIdType" label-width="150px" class="label-width">
                <el-select v-model="form.leaderIdType" placeholder="请选择证件类型">
                  <el-option
                    v-for="dict in id_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="主要负责人证件号"
                prop="leaderCard"
                label-width="150px"
                class="label-width"
              >
                <el-input
                  v-model="form.leaderCard"
                  placeholder="请输入主要负责人证件号"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            
            <el-col :span="12">

              <el-form-item
                label="企业主要负责人学历"
                prop="leaderEducation"
                label-width="150px"
                class="label-width"
              >
                <el-select
                  v-model="form.leaderEducation"
                  placeholder="请输入企业主要负责人学历"
                >
                  <el-option
                    v-for="dict in leader_education"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>

            </el-col>
            <el-col :span="12">
              <el-form-item
                label="企业主要负责人职称"
                prop="leaderTitle"
                label-width="150px"
                class="label-width"
              >
                <el-input
                  v-model="form.leaderTitle"
                  placeholder="请输入企业主要负责人职称"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="安全负责人"
                prop="safetyOfficer"
                label-width="150px"
                class="label-width"
              >
                <el-input
                  v-model="form.safetyOfficer"
                  placeholder="请输入安全负责人"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="安全负责人手机"
                prop="safetyOfficerPhone"
                label-width="150px"
                class="label-width"
              >
                <el-input
                  v-model="form.safetyOfficerPhone"
                  placeholder="请输入安全负责人手机"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="安全负责人固定电话"
                prop="safetyOfficerTel"
                label-width="150px"
                class="label-width"
              >
                <el-input
                  v-model="form.safetyOfficerTel"
                  placeholder="请输入安全负责人固定电话"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="安全负责人学历"
                prop="safetyOfficerEducation"
                label-width="150px"
                class="label-width"
              >
                <el-select
                  v-model="form.safetyOfficerEducation"
                  placeholder="请选择安全负责人学历"
                >
                  <el-option
                    v-for="dict in leader_education"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="安全负责人职称"
                prop="safetyOfficerTitle"
                label-width="150px"
                class="label-width"
              >
                <el-select
                  v-model="form.safetyOfficerTitle"
                  placeholder="请选择安全负责人职称"
                >
                  <el-option
                    v-for="dict in safety_officer_title"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12"> 
              <el-form-item
                label="专职安全生产管理人员数"
                prop="fullSafetyQty"
                label-width="260px"
                class="label-width"
              >
                <el-input-number
                  v-model="form.fullSafetyQty"
                  placeholder="请输入专职安全生产管理人员数"
                />
              </el-form-item>

            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12"> 
              <el-form-item
                label="兼职安全生产管理人员数"
                prop="partSafetyQty"
                label-width="260px"
                class="label-width"
              >
                <el-input-number
                  v-model="form.partSafetyQty"
                  placeholder="请输入兼职安全生产管理人员数"
                />
              </el-form-item>

            </el-col>
            <el-col :span="12">
              <el-form-item
                label="涉及安全生产管理人员数"
                prop="totalSafetyQty"
                label-width="260px"
                class="label-width"
              >
                <el-input-number
                  v-model="form.totalSafetyQty"
                  placeholder="请输入涉及安全生产管理人员数"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="是否涉及爆炸品危险作业"
                prop="isExplosive"
                label-width="260px"
                class="label-width"
              ·>
                <el-radio-group v-model="form.isExplosive">
                  <el-radio
                    v-for="dict in sys_yes_no"
                    :key="dict.value"
                    :label="dict.value"
                    >{{ dict.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="是否制定年度安全生产培训计划"
                prop="isSafetyTrainingPlan"
                label-width="260px"
                class="label-width"
              >
                <el-radio-group v-model="form.isSafetyTrainingPlan">
                  <el-radio
                    v-for="dict in sys_yes_no"
                    :key="dict.value"
                    :label="dict.value"
                    >{{ dict.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="是否建立教育培训记录"
                prop="isRecordsEstablished"
                label-width="260px"
                class="label-width"
              >
                <el-radio-group v-model="form.isRecordsEstablished">
                  <el-radio
                    v-for="dict in sys_yes_no"
                    :key="dict.value"
                    :label="dict.value"
                    >{{ dict.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="特种作业类别"
                prop="specialOperationCategory"
                label-width="260px"
                class="label-width"
              >
                <el-select
                  v-model="form.specialOperationCategory"
                  placeholder="请选择特种作业类别"
                >
                  <el-option
                    v-for="dict in special_operation_category"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="特种作业人员数量"
                prop="specialOperationPersonQty"
                label-width="260px"
                class="label-width"
              >
                <el-input-number
                  v-model="form.specialOperationPersonQty"
                  placeholder="请输入特种作业人员数量"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="特种作业人员教育培训档案数量"
                prop="specialOperationTrainQty"
                label-width="260px"
                class="label-width"
              >
                <el-input-number
                  v-model="form.specialOperationTrainQty"
                  placeholder="请输入特种作业人员教育培训档案数量"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="特种设备作业人员教育培训档案数量"
                prop="specialEquipmentTrainQty"
                label-width="260px"
                class="label-width"
              >
                <el-input-number
                  v-model="form.specialEquipmentTrainQty"
                  placeholder="请输入特种设备作业人员教育培训档案数量"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12"> </el-col>
          </el-row>
          <el-form-item label="说明" prop="remark" label-width="120px" class="label-width">
            <el-input
              v-model="form.remark"
              type="textarea"
              placeholder="请输入内容"
            />
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="经度" prop="lng" label-width="150px" class="label-width">
                <el-input v-model="form.lng" placeholder="请输入经度" :disabled="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纬度" prop="lat" label-width="150px" class="label-width">
                <el-input v-model="form.lat" placeholder="请输入纬度" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Info">
import {
  listInfo,
  getInfo,
  delInfo,
  addInfo,
  updateInfo,
} from "@/api/basic/info";

import { 
  getToken 
} from "@/utils/auth";

const router = useRouter();

const { proxy } = getCurrentInstance();
const {
  special_operation_category,
  economic_type,
  business_status,
  enterprise_scale,
  business_license_type,
  sys_yes_no,
  subject_type,
  leader_education,
  code_type,
  safety_officer_title,
  hazardous_involved,
  id_type,
  town,
} = proxy.useDict(
  "special_operation_category",
  "business_license_type",
  "economic_type",
  "business_status",
  "enterprise_scale",
  "sys_yes_no",
  "subject_type",
  "leader_education",
  "code_type",
  "safety_officer_title",
  "hazardous_involved",
  "id_type",
  "town"
);

const infoList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const daterangeEstablishDate = ref([]);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    uname: null,
    companyCode: null,
    companyName: null,
    registeredAddress: null,
    legalPerson: null,
    contactNumber: null,
    establishDate: null,
    town: null,
    industryCategory: null,
  },
  rules: {
    companyName: [
      { required: true, message: "企业名称不能为空", trigger: "blur" },
    ],
    registeredAddress: [
      { required: true, message: "注册地址不能为空", trigger: "blur" },
    ],
    legalPerson: [
      { required: true, message: "法定代表人不能为空", trigger: "blur" },
    ],
    contactNumber: [
      { required: true, message: "联系电话不能为空", trigger: "blur" },
      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
    ],
    email: [
      { pattern: /^\d{6}$/, message: '请输入正确的邮编（六位数字）', trigger: 'blur' },
    ],

    idType: [
      { required: true, message: "证件类型不能为空", trigger: "blur" },
    ],
    idNumber: [
      { required: true, message: "法定代表人证件号不能为空", trigger: "blur" },
    ],
    establishDate: [
      { required: true, message: "成立时间不能为空", trigger: "blur" },
    ],
    employeesCount: [
      { required: true, message: "从业人员数量不能为空", trigger: "blur" },
    ],
    registeredCapital: [
      { required: true, message: "注册资金不能为空", trigger: "blur" },
    ],
    economicType: [
      { required: true, message: "经济类型不能为空", trigger: "blur" },
    ],
    codeType: [
      { required: true, message: "代码证类型不能为空", trigger: "blur" },
    ],
    businessLicenseType: [
      { required: true, message: "营业执照类型不能为空", trigger: "blur" },
    ],
    town: [
      { required: true, message: "安全经营地址不能为空", trigger: "blur" },
    ],
    safetyAddressDetailed: [
      { required: true, message: "安全经营详细地址不能为空", trigger: "blur" },
    ],
    industryCategory: [
      { required: true, message: "行业分类不能为空", trigger: "blur" },
    ],
    enterpriseType: [
      { required: true, message: "经营类型不能为空", trigger: "blur" },
    ],
    leaderPhone : [
      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
    ],
    isUseHazardous: [
      { required: true, message: "是否使用危化品不能为空", trigger: "blur" },
    ],
    businessStatus: [
      { required: true, message: "企业经营状态不能为空", trigger: "blur" },
    ],
  },
});

const { queryParams, form, rules } = toRefs(data);

/** 查询基本信息列表 */
function getList() {
  loading.value = true;
  queryParams.value.params = {};
  if (null != daterangeEstablishDate && "" != daterangeEstablishDate) {
    queryParams.value.params["beginEstablishDate"] =
      daterangeEstablishDate.value[0];
    queryParams.value.params["endEstablishDate"] =
      daterangeEstablishDate.value[1];
  }
  listInfo(queryParams.value).then((response) => {
    infoList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    createTime: null,
    updateTime: null,
    uid: null,
    uname: null,
    companyCode: null,
    companyName: null,
    registeredAddress: null,
    legalPerson: null,
    contactNumber: null,
    idType: null,
    idNumber: null,
    faxNumber: null,
    postalCode: null,
    establishDate: null,
    employeesCount: null,
    registeredCapital: null,
    economicType: null,
    codeType: null,
    businessLicenseType: null,
    businessStatus: null,
    scale: null,
    topCompanyName: null,
    socialCreditCode: null,
    groupCompanyName: null,
    lng: null,
    lat: null,
    companyOverview: null,
    businessScope: null,
    enterpriseScale: null,
    attachment: null,
    enterpriseType: null,
    safetyProvinceAddress: null,
    safetyCityAddress: null,
    town: null,
    safetyAddressDetailed: null,
    industryCategory: null,
    isUseMajor: null,
    isUseHazardous: null,
    hazardousInvolved: null,
    productionCapacity: null,
    safetyAuthority: null,
    leaderName: null,
    leaderPhone: null,
    documentType: null,
    leaderCard: null,
    leaderEducation: null,
    leaderTitle: null,
    safetyOfficer: null,
    safetyOfficerPhone: null,
    safetyOfficerTel: null,
    safetyOfficerEducation: null,
    safetyOfficerTitle: null,
    fullSafetyQty: null,
    partSafetyQty: null,
    totalSafetyQty: null,
    isExplosive: null,
    isSafetyTrainingPlan: null,
    isRecordsEstablished: null,
    specialOperationCategory: null,
    specialOperationPersonQty: null,
    specialOperationTrainQty: null,
    specialEquipmentTrainQty: null,
    remark: null,
    streetRoleId: null,
    streetRole: null,
    leaderIdType: null,
  };
  proxy.resetForm("infoRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  daterangeEstablishDate.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加基本信息";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _id = row.id || ids.value;
  getInfo(_id).then((response) => {
    form.value = response.data;
    open.value = true;
    title.value = "修改基本信息";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["infoRef"].validate((valid) => {
    if (valid) {
      if (form.value.id != null) {
        updateInfo(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addInfo(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  console.log(row);
  const _ids = row.id || ids.value;
  const _name = row.companyName;
  proxy.$modal
    .confirm('是否确认删除"' + _name + '"的基本信息？')
    .then(function () {
      return delInfo(_ids);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "basic/info/export",
    {
      ...queryParams.value,
    },
    `info_${new Date().getTime()}.xlsx`
  );
}

function handleInfo(row) {
  const { enterpriseType, id,companyName } = row;
  router.push({
    path: "/info/addition",
    query: {
      enterpriseType,
      id,
      companyName
    },
  });
}

getList();
</script>
<style lang="scss" scoped>
:deep(.el-form-item__label) {
  display: block;
}

:deep(.el-select.el-select--default) {
  width: 100%;
}

:deep(.el-form-item.el-form-item--default.asterisk-left.label-width label){
  padding-left: 10px;
}
:deep(
    .el-input.el-input--default.el-input--prefix.el-input--suffix.el-date-editor.el-date-editor--date.el-tooltip__trigger.el-tooltip__trigger
  ) {
  width: 100%;
}
.custom-form {
  max-width: 100%;
  border: 1px solid #ccc;
  padding: 1rem 4rem 0;
}

.form-row {
  margin-bottom: 20px;
}

.custom-divider {
  border-style: dashed; /* 修改边框样式为虚线 */
  border-width: 2px; /* 设置边框宽度 */
  border-color: #ccc; /* 设置边框颜色 */
}



</style>